<template>
  <div class="header-container">
    <div class="header-content">
      <!-- 左侧LOGO -->
      <router-link to="/" class="logo">
        <span class="chinese-name">糯米团子の博客</span>
        <span class="english-name">nomi blog</span>
      </router-link>

      <!-- 中间导航栏（PC端显示） -->
      <div class="nav-links">
        <router-link to="/" class="nav-link">首页</router-link>
        <!-- 修改为最热文章 -->
        <router-link to="/hotArticles" class="nav-link">最热文章</router-link> 
        <router-link to="/tags" class="nav-link">标签</router-link>
        <router-link to="/archives" class="nav-link">文章归档</router-link>
      </div>

      <!-- 右侧操作区（PC端显示） -->
      <div class="right-actions">
        <!-- 搜索框 -->
        <div class="search-container">
          <!-- 添加 style 控制宽度 -->
          <el-select v-model="searchType" slot="prepend" placeholder="请选择" style="width: 120px;">
            <el-option label="文章标题" value="title"></el-option>
            <el-option label="作者昵称" value="nickname"></el-option>
            <el-option label="文章标签" value="tag"></el-option>
            <el-option label="文章时间归档" value="archiveType"></el-option>
          </el-select>
          <input 
            type="text" 
            placeholder="搜索文章..." 
            class="search-input"
            v-model="searchKeyword"
          >
          <button class="search-btn" @click="handleSearch">搜索</button>
        </div>

        <!-- 写文章按钮（登录用户可见） -->
        <div v-if="isLoggedIn" class="write-btn-container">
          <router-link to="/writeArticle" class="capsule-btn write-btn nav-link">写文章</router-link>
        </div>

        <!-- 用户状态操作 -->
        <div class="user-actions">
          <div v-if="!isLoggedIn" class="guest-actions">
            <router-link to="/login" class="capsule-btn nav-link">登录</router-link>
            <router-link to="/register" class="capsule-btn nav-link">注册</router-link>
          </div>
          <div v-else class="user-logged">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link nav-link">
                {{ user.nickname || '用户中心' }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="update">修改信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 移动端菜单按钮（仅小屏幕显示） -->
      <div class="mobile-menu" @click="toggleMenu">
        <i class="el-icon-menu"></i>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <el-menu 
      class="mobile-nav" 
      :collapse-transition="false" 
      v-show="showMobileMenu"
    >
      <!-- 移动端搜索框（带左右边距） -->
      <div class="mobile-search">
        <!-- 添加 style 控制宽度 -->
        <el-select v-model="searchType" slot="prepend" placeholder="请选择" style="width: 120px;">
          <el-option label="文章标题" value="title"></el-option>
          <el-option label="作者昵称" value="nickname"></el-option>
          <el-option label="文章标签" value="tag"></el-option>
          <el-option label="文章时间归档" value="archiveType"></el-option>
        </el-select>
        <input 
          type="text" 
          placeholder="搜索..." 
          class="mobile-search-input"
          v-model="searchKeyword"
        >
        <button class="search-btn" @click="handleSearch">搜索</button>
      </div>

      <el-menu-item index="1" @click="handleMobileNav('/')">首页</el-menu-item>
      <!-- 修改为最热文章 -->
      <el-menu-item index="2" @click="handleMobileNav('/hotArticles')">最热文章</el-menu-item> 
      <el-menu-item index="3" @click="handleMobileNav('/tags')">标签</el-menu-item>
      <el-menu-item index="4" @click="handleMobileNav('/archives')">文章归档</el-menu-item>
      
      <el-menu-item v-if="isLoggedIn" index="5" @click="handleMobileNav('/writeArticle')">写文章</el-menu-item>
      <el-menu-item v-if="!isLoggedIn" index="5" @click="handleMobileNav('/login')">登录</el-menu-item>
      <el-menu-item v-if="!isLoggedIn" index="6" @click="handleMobileNav('/register')">注册</el-menu-item>
      <el-menu-item v-else index="6" @click="handleMobileNav('/user/info')">个人信息</el-menu-item>
      <el-menu-item v-else index="7" @click="logout">退出登录</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      showMobileMenu: false,
      searchKeyword: '',
      searchType: null
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn;
    },
    userInfo() {
      console.log('userInfo:', this.$store.getters.userInfo);
      return this.$store.getters.userInfo;
    },
    user() {
      return this.$store.getters.user;
    }
  },
  mounted() {
    if (this.isLoggedIn) {
      this.$store.dispatch('getUser')
        .then(() => {
          return this.$store.dispatch('getUserInfo');
        })
        .then(() => {
          console.log('用户信息获取成功');
        })
        .catch(error => {
          console.error('获取用户信息失败:', error);
        });
    }
  },
  methods: {
    toggleMenu() {
      this.showMobileMenu = !this.showMobileMenu
    },
    handleMobileNav(path) {
      this.$router.push(path)
      this.showMobileMenu = false
    },
    handleCommand(command) {
      switch(command) {
        // case 'info': this.$router.push('/user/info'); break;
        case 'info': this.$router.push({
            name: 'PersonalPage',
            params: { userId: this.user.id }
          }); break;
        case 'update': this.$router.push('/user/update'); break;
        case 'logout': this.logout(); break;
      }
    },
    logout() {
      this.$store.dispatch('logout');
      this.$message.success('退出成功');
      if (this.$route.path !== '/') {
        this.$router.push('/');
      }
    },
    handleSearch() {
      // 搜索逻辑
      if (this.searchKeyword && this.searchType) {
        const searchDTO = {
          [this.searchType]: this.searchKeyword
        };
        this.$router.push({
          name: 'ArticleSearch',
          query: { searchDTO: JSON.stringify(searchDTO) }  // 将搜索条件作为查询参数传递
        });
        this.searchKeyword = '';  // 清空搜索框内容
        this.searchType = null; // 清空搜索类型
      }
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.header-container {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px; /* 统一使用20px内边距 */
  min-height: 70px;
  position: relative; /* 确保菜单按钮定位正确 */
}

/* LOGO样式 */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  gap: 4px;
}

.chinese-name {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.english-name {
  font-size: 14px;
  color: #606266;
}

/* 中间导航栏 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 16px;
}

.nav-link {
  color: #303133;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #ffb76b;
}

/* 右侧操作区 */
.right-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  border: 1px solid #ffb76b;
  border-radius: 20px;
  padding: 6px 16px;
  width: 240px;
  font-size: 14px;
}

.search-btn {
  background-color: #ffb76b;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
}

.write-btn {
  background-color: #ffb76b;
  color: #fff;
  border-radius: 20px;
  padding: 6px 14px;
}

.capsule-btn {
  border-radius: 20px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.3s;
}

.guest-actions .nav-link {
  border: 1px solid #e4e7ed;
  color: #606266;
}

.guest-actions .nav-link:hover {
  border-color: #ffb76b;
  color: #ffb76b;
}

/* 移动端适配 */
.mobile-menu {
  font-size: 24px;
  cursor: pointer;
  display: none; /* 默认隐藏 */
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101; /* 确保按钮在菜单之上 */
}

.mobile-nav {
  width: 100%;
  margin-top: 0;
  border-top: 1px solid #e4e7ed;
}

/* 修复搜索框左右边距 */
.mobile-search {
  padding: 15px 20px; /* 左右内边距确保对称 */
  background-color: #f5f7fa;
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid #e4e7ed;
  background-color: transparent;
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

/* 媒体查询控制移动端显示 */
@media (max-width: 768px) {
  .nav-links, .right-actions {
    display: none;
  }

  .header-content {
    padding: 15px 20px;
  }

  .logo {
    flex-direction: row;
    gap: 10px;
    flex-grow: 1;
  }

  .chinese-name {
    font-size: 20px;
  }

  .english-name {
    display: none;
  }

  .mobile-menu {
    display: block; /* 小屏幕显示菜单按钮 */
  }
}
</style>